<!-- 
    主页随笔 informal-essay
 -->
<template>
    <div>
        <Title-l>
            <template #name>
                InformalEssay
            </template>
            <template #tap>
                <Button-l>more</Button-l>
            </template>
        </Title-l>
        <div class="row">
            <div v-for="i in arr" @click="jumpDeail()" :key="i.date">
                <img :src="i.img" alt="">
                <div class="row-child">
                    <div>{{ i.address }}</div>
                    <div>{{ i.date }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
const arr = [
    {
        id: 1,
        name: "游玩",
        img: "",
        address: "成都市",
        date: "2023-9"
    },
    {
        id: 2,
        name: "美食美食美食美食",
        img: "",
        address: "成都市成都市成都市成都市成都市成都市",
        date: "2023-11"
    }
]
const jumpDeail = () => {
    console.log('🚀🚀', 555);
    router.push('/informal-essay-detail/6')
}
</script>

<style lang="scss" scoped>
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    >div {
        flex: 1;
        border-radius: 10px;
        border: 2px solid #2d2c29;

        img {
            width: 100%;
            height: 150px;
            display: block;
        }
    }

}

.row-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    border-top: 2px solid #2d2c29;

    >div {
        padding: 0 20px;
        height: 100%;
        align-items: center;
        box-sizing: border-box;
        line-height: 50px;
    }

    >div:nth-child(1) {
        width: 190px;
        border-right: 2px solid #2d2c29;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
</style>

 